<template>
	<view class="content">
		<view class="wid100 " style="height: 416rpx;">
			<image src="../../static/tu1.png" class="wh100"></image>
		</view>
		<view class="wid90 mar bacFFF borRad20 mar-top30" style="box-shadow: 0rpx 5rpx 20rpx 0rpx rgba(0,0,0,0.1);">
			<view class="wid90 mar dis disAl disJuB" style="height: 100rpx;">
				<view class="foSi35 fowe600">姓名</view>
				<input class="foSi25 wid70" style="text-align: right;" v-model="name" placeholder="输入您的姓名"/>
			</view>
			<view class="wid100 xia"></view>
			<view class="wid90 mar dis disAl disJuB" style="height: 100rpx;">
				<view class="foSi35 fowe600">性别</view>
				<view class="dis disAl">
					<view class="dis disAl" @click="genderClick(0)">
						<view v-if="gender == 0" class="dis disAl disJuC borRad50" :style="'border: 1rpx solid '+theme.main_color+';'"
							style="width: 26rpx;height: 26rpx;">
							<view class="borRad50" :style="'background-color: '+theme.main_color+';'"
							style="width: 14rpx;height: 14rpx;"></view>
						</view>
						<view v-if="gender != 0" class="dis disAl disJuC borRad50" style="width: 26rpx;height: 26rpx;border: 1rpx solid #818181;"></view>
						<view class="foSi30 mar-left10" :style="gender == 0?'color: '+theme.main_color+';':''">男</view>
					</view>
					<view class="dis disAl mar-left30" @click="genderClick(1)">
						<view v-if="gender == 1" class="dis disAl disJuC borRad50" :style="'border: 1rpx solid '+theme.main_color+';'"
						 style="width: 26rpx;height: 26rpx;">
							<view class="borRad50" :style="'background-color: '+theme.main_color+';'" 
							style="width: 14rpx;height: 14rpx;"></view>
						</view>
						<view v-if="gender != 1" class="dis disAl disJuC borRad50" style="width: 26rpx;height: 26rpx;border: 1rpx solid #818181;"></view>
						<view class="foSi30 mar-left10" :style="gender == 1?'color: '+theme.main_color+';':''">女</view>
					</view>
				</view>
			</view>
			<view class="wid100 xia"></view>
			<view class="wid90 mar dis disAl disJuB" style="height: 100rpx;">
				<view class="foSi35 fowe600">生日</view>
				<picker mode="date" :value="birthday" @change="bindDateChange">
					<view class="dis disAl disJuB foSi25">
						<view class="mar-right10" :style="birthday?'':'color: #7A7979;'">{{birthday?birthday:'请选择'}}</view>
						<uni-icons type="right" size="25rpx"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="wid100 xia"></view>
			<view class="wid90 mar dis disAl disJuB" style="height: 100rpx;">
				<view class="foSi35 fowe600">手机号</view>
				<input class="foSi25 wid70" style="text-align: right;" type="number" v-model="phone" placeholder="输入您的手机号"/>
			</view>
			<view class="wid100 xia"></view>
			<view class="wid90 mar dis disAl disJuB" style="height: 100rpx;">
				<view class="foSi35 fowe600">意向工作城市</view>
				<picker :value="cityIndex" @change="bindCityChange" :range-key="'title'" :range="addressList">
					<view class="dis disAl foSi25">
						<view class="mar-right10" :style="city?'':'color: #7A7979;'">{{city?city.title:'请选择'}}</view>
						<uni-icons type="right" size="25rpx"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="wid100 xia"></view>
			<view class="wid90 mar dis disAl disJuB" style="height: 100rpx;">
				<view class="foSi35 fowe600">工作门店</view>
				<picker :value="shopIndex" @change="bindShopChange" :range-key="'store_name'" :range="shopList">
					<view class="dis disAl foSi25">
						<view class="mar-right10" :style="shop?'':'color: #7A7979;'">{{shop?shop.store_name:'请选择'}}</view>
						<uni-icons type="right" size="25rpx"></uni-icons>
					</view>
				</picker>
			</view>
			<view v-if="city && shopList.length > 0" class="wid100 xia"></view>
			<view class="wid90 mar">
				<view class="foSi35 fowe600 mar-top30">工作形象照</view>
				<view class="foSi20 mar-top20" style="color: #868686;">请上传本人近期照片，图片大小不超过10M </view>
				<view @click="shangImage()" class="mar-top20 dis disAl disJuC borRad10" style="border: 4rpx solid #707070;width: 200rpx;height: 200rpx;">
					<image v-if="!image" src="../../static/shangchuan.png" style="width: 61rpx;height: 51rpx;"></image>
					<image v-if="image" :src="url+image" class="wh100 borRad10"></image>
				</view>
			</view>
			<view style="height: 50rpx;"></view>
		</view>
		<view class="wid90 mar bacFFF borRad40 dis disAl disJuC hei86 foSi35 fowe600 mar-top40 coFFF" 
			:style="'background-color: '+theme.main_color+';'" @click="tijiao()">提交申请</view>
		<view style="height: 57rpx;"></view>
		<!-- <unicloud-city-select ref="citySelect" :hot-city="hotCity" :location="false" @select="select"></unicloud-city-select> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				yanzheng: '获取验证码',
				sec: 0,
				name: '',
				gender: 0,
				birthday: '',
				phone: '',
				code: '',
				addressList: [],
				cityIndex: 0,
				// 当前选择的城市
				city: null,
				image: '',
				shopList: [],
				shopIndex: null,
				shop: null,
				theme: null
			}
		},
		async onLoad(option) {
			await this.$style.getIndex(this.url,this.global.site_id)
			var that = this;
			if(!uni.getStorageSync('token')){
				
				uni.showToast({
					title: "请登录",
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000
				}) 
				setTimeout(function(){
					// #ifdef APP
					uni.navigateTo({
						url:'/pages/login/login'
					})
					// #endif
					// #ifdef H5
					window.location.href = that.global.url + 'addon/qianyu_smfw/h5/#/pages/login/wxLogin'
					// #endif
				},2000)
			}
			this.addressList = uni.getStorageSync('address');
			this.theme = uni.getStorageSync('theme')
			
		},
		onShow() {
			// this.gettechinfo() // 获取技师详情
			this.getShop()
		},
		methods: {
			/* 
			 获取技师详情
			 */
			gettechinfo(){
				var that = this;
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/tech/tech_infos',
					method: "POST",
					header: {
						'site-id': that.global.site_id ,//自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						// city: that.city.id
					},
					success(res) {
						let result = res.data
						console.log('技师身份详情')
						console.log(result)
						if (result.code == 1) {
							if(result.data.length > 0){
								// 有技师身份
								that.techinfo = result.data
							}
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
			},
			getShop(){
				var that = this;
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/store/lists_city',
					method: "POST",
					header: {
						'site-id': that.global.site_id //自定义请求头信息
					},
					data: {
						// city: that.city.id
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.shopList = result.data
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
			},
			bindCityChange: function(e) {
				this.cityIndex = e.detail.value
				this.city = this.addressList[this.cityIndex]
				// this.shop = null
				
			},
			bindShopChange: function(e) {
				this.shopIndex = e.detail.value
				this.shop = this.shopList[this.shopIndex]
			},
			tijiao(){
				var that = this;
				if(!that.name){return uni.showToast({title: '请输入姓名',icon: 'error',duration: 2000})};
				if(!that.birthday){return uni.showToast({title: '请选择生日',icon: 'error',duration: 2000})};
				//正则表达式定义手机号正确格式
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!reg.test(this.phone)){return uni.showToast({title: '请输入正确手机号',icon: 'error',duration: 2000})};
				if(!that.city){return uni.showToast({title: '请选择意向城市',icon: 'error',duration: 2000})};
				if(that.shopList.length == 0){return uni.showToast({title: '所选城市没有店铺',icon: 'error',duration: 2000})};
				if(!that.shop){return uni.showToast({title: '请选择工作门店',icon: 'error',duration: 2000})};
				if(!that.image){return uni.showToast({title: '请上传工作形象照',icon: 'error',duration: 2000})};
				uni.request({
					url: that.global.url + '/api/qianyu_smfw/technician/apply_technician',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						name:that.name,
						gender: that.gender,
						birthday: that.birthday,
						phone: that.phone,
						city: that.city.id,
						work_img: that.image,
						store_id: that.shop.id
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
							setTimeout(function(){
								uni.navigateBack({
									delta:1,//返回层数，2则上上页
								})
							},2000)
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
			},
			//上传图片
			shangImage(){
				var that = this
				
				// #ifdef APP
				var xiangce = 0;
				var xiangji = 0;
				const permission = 'android.permission.WRITE_EXTERNAL_STORAGE'; // 要检查的权限
				const android_camera = 'android.permission.CAMERA';
				plus.android.checkPermission(
				  permission,
				  granted => {
					  console.log(granted);
					if (granted.checkResult == '-1') {
					  console.log('相册未授权');
					  xiangce = 1;
					}
				  },
				  error => {
					console.error('Error checking permission:', error.message);
				  }
				);
				plus.android.checkPermission(
					android_camera,
					granted => {
						console.log(granted);
						if (granted.checkResult == '-1') {
						  console.log('相机未授权');
						  xiangji = 1;
						}
					},
					error => {
						console.error('Error checking permission:', error.message);
					}
				);
				setTimeout(function(){
					console.log(xiangce);
					console.log(xiangji);
					if(xiangce == 1 && xiangji == 1){
						uni.showModal({
							title: '提示',
							content: that.global.name+'对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
							success: function (res) {
								if (res.confirm) {
									that.picopsshow = true;
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
						})
					}else if(xiangce == 1 && xiangji == 0){
						uni.showModal({
							title: '提示',
							content: that.global.name+'对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
							success: function (res) {
								if (res.confirm) {
									that.picopsshow = true;
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
						})
					}else if(xiangce == 0 && xiangji == 1){
						uni.showModal({
							title: '提示',
							content: that.global.name+'对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
							success: function (res) {
								if (res.confirm) {
									that.picopsshow = true;
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
						})
					}else{
						that.picopsshow = true;
					}
				},100)
				// #endif
				uni.chooseImage({
					count: 1,
					success:(res)=>{
						that.shangchuan(res.tempFilePaths[0])
						// that.image = res.tempFilePaths[0]
					},
				})
			},
			shangchuan(tempFilePaths){
				var that = this
				uni.uploadFile({
					url: that.global.url + '/api/qianyu_smfw/common/file_upload',
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						"token": uni.getStorageSync('token'),
					}, //请求token	
					filePath: tempFilePaths,
					name: 'file',
					success: (res) => {
						var apiresult = JSON.parse(res.data)
						if (apiresult.code == 1) {
							console.log(apiresult.data);
							that.image = apiresult.data;
						} else {
							uni.showToast({
								title: apiresult.msg,
								icon:'error',
								duration: 2000
							})
						}
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon:'error',
							duration: 2000
						})
					}
				});
			},
			// 点击城市选项
			select(city) {
				this.city = city;
			},
			// 打开城市选择页面
			open(url,options) {
				// uni.navigateTo({
				// 	url:url
				// });
				this.$refs.citySelect.open();
			},
			genderClick(index){
				this.gender = index
			},
			bindDateChange: function(e) {
				this.birthday = e.detail.value
			},
		}
	}
</script>

<style>
	.content {
		/* background-color: #9FC5F2; */
	}
	.xia{
		height: 1rpx;
		background-color: #E5E5E5;
	}
</style>
